<script>
  import $ from 'dfish-widget'
  import Dialog from './Dialog.vue'
  import text from '../widget.text.js'
	import ExampleMenu from '../examples/ExampleMenu.vue'

  export default {
    mixins: [Dialog],
    data() {
      return {
        name: 'Menu',
        remark: '下拉菜单',
        extends: [text],
        deprecate: 'commands,context,cover',
        examples: [
        {
              remark: '鼠标点击"更多"，显示下拉菜单',
              type: 'html',
            	view: true,
              code: `
                <template>
                  <w-menu>
                    <template #target>
                      <span>更多</span>
                    </template>
                    <w-button text="预览"></w-button>
                    <w-button text="删除"></w-button>
                  </w-menu>
                </template>
              `,
        },
        {
          remark: '在树节点上点右键，弹出菜单',
          type: 'html',
					view: true,
          code: [
						{
							src: 'index.vue',
							code: `
                <template>
                  <w-tree :children="treeList">
                    <template #default="{item}">
                      <w-leaf :key="item.id" :text="item.text" :children="item.children" :data="item" @contextmenu.prevent="contextmenu($event,item)"></w-leaf>
                    </template>
                  </w-tree>
                </template>
                <${'script'}>
                  import $ from 'dfish-widget'
                  import ExampleMenu from './ExampleMenu.vue'
                  export default {
                    data() {
                      return {
                        treeList: [
                          {text: '根节点', id: 'root', children: [
                            {text: '子节点', id: 'sub'}
                          ]}
                        ]
                      }
                    },	
                    methods: {
                      contextmenu(target, data) {
                        $(target).pop(ExampleMenu, {target, data})
                      }
                    }
                  }
                </${'script'}>
              `
						},
						{
							src: 'ExampleMenu.vue',
							code: `
							  <template>
							    <w-menu :snap="target">
							      <w-button text="新建" @click="create"></w-button>
							      <w-button text="删除" @click="remove"></w-button>
							    </w-menu>
							  </template>
							  
							  <${'script'}>
							    export default {
							    	props: ['data', 'target'],
							    	methods: {
							    	  create() {
							    	    console.log(this.data.id) //打印树节点的id
							    	  },
							    	  remove() {
							    	    console.log(this.data.text) //打印树节点的文本
							    	  }
							    	}
							    }
							  </${'script'}>
							`
						}
					],
					comp: {
						data() {
							return {
								treeList: [
									{text: '根节点', id: 'root', children: [
										{text: '子节点', id: 'sub'}
									]}
								]
							}
						},
						methods: {
							contextmenu(target, data) {
							  $(target).pop(ExampleMenu, {target, data})
							}
						}	
					}
        }]
      }
    }
  }
</script>
